<template>
  <div>
    <div v-show="getlogin">
      <div class="head">The Naraka API</div>
      <div style="display:flex;">
        <div style="height:calc(100vh - 80px);background-color:#545c64">
          <el-row class="tac">
            <el-col :span="3" style="width:180px">
              <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                active-text-color="#ffd04b">
                <el-menu-item index="1" class="leftrow" @click="gohome">
                  <i class="el-icon-location"></i>
                  <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="2" class="leftrow" @click="gointer">
                  <i class="el-icon-menu"></i>
                  <span slot="title">接口测试</span>
                </el-menu-item>
                <el-menu-item index="3" class="leftrow" @click="gouse">
                  <i class="el-icon-document"></i>
                  <span slot="title">用例管理</span>
                </el-menu-item>
                <el-menu-item index="4" class="leftrow" @click="gocol">
                  <i class="el-icon-setting"></i>
                  <span slot="title">集合管理</span>
                </el-menu-item>
                <el-menu-item index="5" class="leftrow" @click="gotalk">
                  <i class="el-icon-setting"></i>
                  <span slot="title">交流分享</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </div>
        <el-row style="width:calc(100vw - 180px);height:calc(100vh - 80px)">
          <el-col :span="24" style="border:3px solid #BFBFBF;border-radius: 5px;background-color:#F2F2F2;">
            <button class="btn" @click="goback">返回</button>
            <img src="../src/assets/返回.png" class="backimg" />
            <img src="../src/assets/电脑.png" class="computerimg" />
          </el-col>
          <el-col :span="24" style="height:calc(100% - 41px)">
            <router-view />
          </el-col>

        </el-row>
      </div>
    </div>
    <div v-show="!getlogin">
      <img src="../src/assets/login.gif" class="loginimg" />
      <div id="loginDiv">
        <h1 style="font-size:40px;text-align:center;color:antiquewhite;margin-top: 23px;">欢迎登录</h1><br/>
        <form id="form">
          <div style="margin-left:20%;margin-top: 25px;">
            <p class="loginp">账号:<input id="logininput" type="text" v-model="loginForm.username" placeholder="请输入用户名" />
            </p><br/>
            <p class="loginp">密码:<input id="logininput" type="password" v-model="loginForm.password"
                placeholder="请输入密码" /></p>
            <br><br>
          </div>
          <div style="text-align: center;margin-top: 10px;">
            <input type="button" id="loginbutton" value="登录" @click="login">
            <input type="button" id="enrollbutton" @click="dialogVisible = true" value="注册">


          </div>
        </form>
      </div>
      <el-dialog style="text-align-last: center;background-color:#94D8F6;" title="注册" :visible.sync="dialogVisible"
        width="30%" :before-close="handleClose1">
        <div>

          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
              <el-input type="text" v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="margin-right: 0px;" type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button style="margin-right: 100px;" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
  data() {

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {

      dialogVisible: false,

      ruleForm: {
        username: '',
        pass: '',
        checkPass: '',
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
      },



      getlogin: false,
      loginForm: {
        username: '',
        password: ''
      },
      responseResult: [],
      checked: false,
    }

  },

  methods: {
    login () {
        // alert(this.loginForm.username)
        // this.getlogin=true;
        this.$axios
          .post('/user/login',{
            
            
            username: this.loginForm.username,
            password: this.loginForm.password
           
          })
          .then(successResponse => {
            var res=eval(successResponse);
            console.log(res.data.msg+"+++++++");
            // console.log(successResponse.data.code+"////////");
            
            if (res.data.msg == "success") {
              // alert("res.data.msg="+res.data.msg);
              this.getlogin=true;
              this.$router.push({path: '/Homepage'})
              return successResponse.data;
            }
          })
          .catch(failResponse => {
            // console.log(failResponse.data.code);
            var res=eval(failResponse);
            if(res.data.msg=="fail"){
              this.$router.push({path:"App"});
              return failResponse.data;
            }
          })
        },

    gointer() {
      this.$router.push('/intertest')

    },
    gouse() {
      this.$router.push('/usecase')
    },
    gotalk() {
      this.$router.push('/communication')
    },
    gocol() {
      this.$router.push('/collection')
    },
    gohome() {
      this.$router.push('/homepage')
    },
    goback() {
      this.$router.go(-1)
    },
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    submitForm() {
      this.$axios
          .post('/user/register',{
            
            username: this.ruleForm.username,
            password: this.ruleForm.pass
           
          })
          .then(successResponse => {
            var res=eval(successResponse);
           console.log(res.data.msg+"*************");
            
            if (res.data.msg == "success") {
              alert("注册成功");
              // this.getlogin=true;
              // this.$router.push({path: 'App'})
              return successResponse.data;
            }
          })
          .catch(failResponse => {
            var bes=eval(failResponse);
            console.log(bes.data.msg+"++++++++");
            if(bes.data.msg=="fail"){
              alert("注册失败,用户名已存在");
              return failResponse.data;
            }
          })
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert('submit!');
      //     alert('注册成功！')
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}

</script>

<style scoped="scoped">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.head {
  /* width: 2260px; */
  width:100%;
  background-color: beige;
  height: 80px;
  text-align: center;
  font-size: 30px;
  /* margin-bottom: 3px; */
  line-height: 80px;
  background-color: #545c64;
  color: #fff;
  border-radius: 4px;
}

.backimg {
  float: right;
  margin-right: 5px;
  width: 25px;
  height: 25px;
  margin-top: 5px;
}

.computerimg {
  float: left;
  margin-left: 22px;
  width: 30px;
  height: 30px;
  margin-top: 3px;

}

.btn {
  float: right;
  margin: 5px;
  width: 60px;
  height: 25px;
  font-size: 1px;

}

.leftrow.is-active {
  background: rgb(67, 74, 80) !important;
}


#loginDiv {
  /* border-style:outset; */

  border-radius: 70px;
  /* box-shadow: 7px 7px 17px rgba(180, 186, 202, 0.5); */
  background-color: rgba(18, 25, 22, 0.2);
  position: absolute;
  width: 600px;
  height: 360px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.loginimg {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 5;
  padding: 5;
  /* background: url(background.png) no-repeat 0px 0px; */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  /* -moz-background-size: 100% 100%; */
}

.loginp {
  font-size: 25px;
  color: rgb(52, 184, 149);
}

#logininput {
  margin-left: 10px;
  border-radius: 5px;
  font-size: 20px;
  font-family: fantasy;
  border-style: hidden;
  height: 36px;
  width: 300px;
  background-color: rgba(27, 101, 122, 0.804);
  outline: none;
  color: #531025e6;
  padding-left: 10px;
}

#loginbutton {
  /* border-color: rgb(6, 157, 41); */
  background-color: rgba(10, 123, 222, 0.645);
  color: rgb(19, 8, 31);
  border-style: hidden;
  border-radius: 5px;
  width: 100px;
  height: 40px;
  font-size: 20px;
  font-family: fantasy;
}
#enrollbutton {
  /* border-color: rgb(6, 157, 41); */
  background-color: rgba(10, 123, 222, 0.645);
  color: rgb(19, 8, 31);
  border-style: hidden;
  border-radius: 5px;
  width: 100px;
  height: 40px;
  font-size: 20px;
  font-family: fantasy;
  margin-left: 20px;
}
</style>